<template>
<view class="main">
		
	
    <view class="top">
	    <view class="top-left">
		    <image src="https://s3.bmp.ovh/imgs/2022/07/27/6289fe4ab016c74a.png" class="head-icon" mode="widthFix"/>
		    <view class="head-left-textone">第</view>
		    <view class="head-left-texttwo">七</view>
			
		    <text class="head-left-textthree">周</text>	
	</view>
	
	    <view class="top-right">
		    <view class="day" v-for="(item2,index) in array2">
			    <view class="day-box1">
				{{item2.Day}}
			    </view>
			    <view class="day-box2">
				{{item2.day}}
			    </view>
		    </view>
		
		    
	    </view>

    </view>	
		
		
	<view class="botton">
		<view class="botton-left">
			<view class="botton-left-box">
				<text class="number">1</text>
				<text class="botton-left-box-text">08:00</text>
				<text class="botton-left-box-text">08:50</text>
			</view>
			<view class="botton-left-box">
				<text class="number">2</text>
				<text class="botton-left-box-text">09:00</text>
				<text class="botton-left-box-text">09:50</text>
			</view>
			<view class="botton-left-box">
				<text class="number">3</text>
				<text class="botton-left-box-text">10:10</text>
				<text class="botton-left-box-text">11:00</text>
			</view>
			<view class="botton-left-box">
				<text class="number">4</text>
				<text class="botton-left-box-text">11:10</text>
				<text class="botton-left-box-text">12:00</text>
			</view>
		</view>
		
		<view class="botton-right">
			<view class="botton-right1">
				<view style="background-color: rgba(255, 113, 113);" v-for="(item,index) in postOb">
					<text class="texttop" >{{item.course1}}</text>
					<text >{{item.teacher1}}</text>
					<text >{{item.class1}}</text>
				</view>
				
				
			</view>
			
			<view class="botton-right1">
				<view style="background-color: rgba(255, 113, 113);" v-for="(item,index) in postOb">
					<text class="texttop" >{{item.course2}}</text>
					<text >{{item.teacher2}}</text>
					<text >{{item.class3}}</text>
				</view>
				
				
			</view>
		</view>
	</view>	
	
	
	
	<view class="botton2">
			<view class="botton-left">
				<view class="botton-left-box">
					<text class="number">5</text>
					<text class="botton-left-box-text">13:00</text>
					<text class="botton-left-box-text">14:20</text>
				</view>
				<view class="botton-left-box">
					<text class="number">6</text>
					<text class="botton-left-box-text">14:30</text>
					<text class="botton-left-box-text">15:20</text>
				</view>
				<view class="botton-left-box">
					<text class="number">7</text>
					<text class="botton-left-box-text">15:30</text>
					<text class="botton-left-box-text">16:20</text>
				</view>
				<view class="botton-left-box">
					<text class="number">8</text>
					<text class="botton-left-box-text">16:30</text>
					<text class="botton-left-box-text">17:20</text>
				</view>
			</view>
			
			<view class="botton-right">
				<view class="botton-right1">
					<view style="background-color: rgba(255, 113, 113);" v-for="(item,index) in postOb">
						<text class="texttop" >{{item.course3}}</text>
						<text >{{item.teacher3}}</text>
						<text >{{item.class3}}</text>
					</view>
					
					
				</view>
				
					<view class="botton-right1">
						<view style="background-color: rgba(255, 113, 113);" v-for="(item,index) in postOb">
							<text class="texttop" >{{item.course4}}</text>
							<text >{{item.teacher4}}</text>
							<text >{{item.class4}}</text>
						</view>
						
						
					</view>
			    </view>
		</view>	
		
		
		
		
		
	<view class="botton3">
			<view class="botton-left">
				<view class="botton-left-box">
					<text class="number">9</text>
					<text class="botton-left-box-text">17:30</text>
					<text class="botton-left-box-text">18:20</text>
				</view>
				<view class="botton-left-box">
					<text class="number">10</text>
					<text class="botton-left-box-text">18:30</text>
					<text class="botton-left-box-text">19:20</text>
				</view>
				<view class="botton-left-box">
					<text class="number">11</text>
					<text class="botton-left-box-text">19:30</text>
					<text class="botton-left-box-text">20:20</text>
				</view>
				<view class="botton-left-box">
					<text class="number">12</text>
					<text class="botton-left-box-text">20:30</text>
					<text class="botton-left-box-text">21:20</text>
				</view>
			</view>
			
			<view class="botton-right">
				<view class="botton-right1">
					<view style="background-color: rgba(255, 113, 113);" v-for="(item,index) in postOb">
						<text class="texttop" >{{item.course5}}</text>
						<text >{{item.teacher5}}</text>
						<text >{{item.class5}}</text>
					</view>
					
					
				</view>
				<view class="botton-right1">
					<view style="background-color: rgba(255, 113, 113);" v-for="(item,index) in postOb">
						<text class="texttop" >{{item.course6}}</text>
						<text >{{item.teacher6}}</text>
						<text >{{item.class6}}</text>
					</view>
					
					
				</view>
			</view>
		</view>	
		
	
	
	
	
	
	
	
	
</view>
</template>

<script>
	export default {
		data() {
			return {
				
				array2: [{
						Day: '星期一',day:'4-15'
					},
					{
						Day: '星期二',day:'4-16'
					},
					{
						Day: '星期三',day:'4-17'
					},
					{
						Day: '星期四',day:'4-18'
					},
					{
						Day: '星期五',day:'4-19'
					},
					{
						Day: '星期六',day:'4-20'
					},
					{
						Day: '星期天',day:'4-21'
					},
				],
				}
			}
		}
</script>
<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				
				
				postOb: {
					course1: "",
					teacher1: "",
					class1: "",
					
					course2: "",
					teacher2: "",
					class2: "",
					
					course3: "",
					teacher3: "",
					class3: "",
					
					course4: "",
					teacher4: "",
					class4: "",
					
					course5: "",
					teacher5: "",
					class5: "",
					
					course6: "",
					teacher6: "",
					class6: "",
					
				}
			}
		},
		
			
	methods: {
		
	
		onLoad: function (options) {
			
				uni.request({
					url:'', //请求后端的接口地址,我这个仅供参考
					method: 'POST', //这个是后端你请求的方式，是什么请求就使用什么请求方式，且必须大写
					data: {
						"user":23040031012;
						"password":894374556;
						
					},
					header: {
						"Content-Type": "multipart/form-data" //请求头信息
					},
					dataType:'json',
					success: (res) => { //如果访问接口成功就会进入success
						console.log("接口调用成功");
					},
					fail: () => { //如果访问接口失败就会进入fail
	
						console.log("调用接口失败")
	
					}
				}),}
				
			}}
			
</script>
<style>
	
	@keyframes show {
	  0% {
	    margin-top: 30rpx;
	  }
	  100% {
	    margin-top: 0;
	  }
	}

	
	.main {
		background-color:rgba(245, 245, 245);
		width: 750rpx;
		height: 1400rpx;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	
  .top{
	  overflow: hidden;
	  background-color:rgba(245, 245, 245);
	  width: 750rpx;
	  height: 200rpx;
	  margin: 0;
	  padding: 0;
	  display: flex;
	  flex-direction: row;
	  font-family: "微软雅黑";
	  
  }
  
  .top-left {
	  width: 150rpx;
	  height: 150rpx;
	  background-color: white;
	  margin: 0 2% 0% 2%;
	  border-radius: 10%;
	  display: flex;
	  flex-direction: column;
  }
  
  .top-left image {
	  width: 50rpx;
	  position: absolute;
  }
  
  .head-left-textone {
	  transform: translate(100rpx,0px);
  }
  
  .head-left-texttwo {
  	  transform: translate(50rpx,0px);
	  font-style: italic;
  }
  
  .head-left-textthree {
  	  transform: translate(5rpx,0px);
  }
  
  .top-right {
	  display: flex;
	  flex-direction: row;
	  font-size: 30rpx;
	  width: 560rpx;
	  height: 150rpx;
	  background-color: white;
	  border-radius: 10%;
	  margin-right: 0;
	  
  }
  
  .day {
	  width: 14.285%;
  }
  
  .day-box1 {
	  margin-top: 30%;
	  text-align: center;
	  font-weight: 600;
  }
  
  .day-box2 {
	  margin-top: 15%;
	  text-align: center;
  }
  
  
  
  .botton {
	  width: 750rpx;
	  height: 750rpx;
	  display: flex;
	  flex-direction: row;
	  transform: translate(0,-40rpx);
	  margin-bottom: 0;
  }
  
  .botton2 {
  	  width: 750rpx;
  	  height: 750rpx;
  	  display: flex;
  	  flex-direction: row;
  	  transform: translate(0,-380rpx);
  	  margin-bottom: 0;
  }
  
  .botton3 {
  	  width: 750rpx;
  	  height: 750rpx;
  	  display: flex;
  	  flex-direction: row;
  	  transform: translate(0,-720rpx);
  	  margin-bottom: 0;
  }
  
  .botton3 .botton-right1 view {
	  background-color: rgba(128, 128, 128);
  }
  
  .botton-left {
	  width: 150rpx;
	  height: 400rpx;
	  background-color: white;
	  margin: 0 2% 0% 2%;
	  border-radius: 5%;
	  font-size: 25rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;
  }
  
  .botton-left-box {
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;
	  margin-top: 3%;
	  margin-bottom: 3%;
  }
  
  .botton-left-box-text {
	  text-align: center;
	  color: rgba(138, 135, 144);
  }
  
  .number {
	  font-weight: 600;
	  color: black;
	  font-style: italic;
	  text-align: center;
  }
  
	  
  .botton-right {
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;
	  background-color: white;
	  border-radius: 3%;
	  width: 560rpx;
	  height: 400rpx;
	  font-size: 30rpx;
  }
  
  .botton-right1 {
	  display: flex;
	  flex-direction: row;
	  width: 560rpx;
	  margin: 0;
	  padding: 0;
  }
  
	  
  .botton-right1 view {
	  display: flex;
	  flex-direction: column;
	  margin: 0 0rpx;
	  width:80rpx;
	  height: 195rpx;
	  border-radius: 8%;
	  text-align: center;
	  animation: show 1s ease-in-out;
	  
  
  }
  
 .texttop {margin-top: 35%;
	  
  }
  
  
  
  
  
  
  
  
  
  
  
</style>
